<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

	<title>NavigationMenu Test (steel)</title>

	<link rel="stylesheet" href="../../../../../dojo/dojo/resources/dojo.css">
	<link rel="stylesheet" href="../../../themes/steel/SteelBase.css">
	
	<link rel="stylesheet/less" type="text/css" href="../../../themes/steel/icons.css">
	<link rel="stylesheet/less" type="text/css" href="../../../themes/steel/swt/navigation/NavigationMenu.less">
	<style type="text/css">
	 body {
	 	padding:50px;
	 }
	</style>
	<script type="text/javascript" src="../../../tp/less-1.1.4.js"></script>
	<script type="text/javascript" charset="utf-8">
    	less.env = "development";
    	less.watch();
	</script>

	<style type="text/css">
	.widgetContainer {
		padding-top: 10px;
		width: 190px;
	}
	.widgetContainerH {
		padding-top: 100px;
	}

	.testTitle {
		padding-bottom: 10px;
	}
	
	body {
		padding-top: 60px;
	}
	.header {
		height: 48px;
		width: 1280px;
	}
	</style>
	<script type="text/javascript">
            djConfig = {
                isDebug : true,
                debugAtAllCosts : false,
                parseOnLoad : true,
                baseUrl : "../../../../../dojo/dojo/",
                modulePaths : {
                	'swt' : '../../swt-core/swt'
                }
            };
    </script>
	<script type="text/javascript" src="../../../../../dojo/dojo/dojo.js"></script>

	<script language="JavaScript" type="text/javascript">
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("swt.widget.navigation.NavigationMenu");
		dojo.require("swt.widget.navigation.NavigationMenuItem");
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them

		function myHandler(anItem){
			console.debug("myHandler-->" + anItem.label);
		}
		
		dojo.addOnLoad(function(){
			dojo.connect(dijit.byId("m1"), "onClick", function(item, evt){
				console.log("m1->" + item.label);
			});
			dojo.connect(dijit.byId("m2"), "onClick", function(item, evt){
				console.log("m2->" + item.label);
			});

		});
		
	</script>
</head>
<body class="steel">
<div class="widgetContainerH">
<p>Horizontal Menu can be used from dijit, will fix if have time later.</p>
<div class="header">
<ul dojoType="swt.widget.navigation.NavigationMenu" id="m1" alignment="horizontal">
	<li dojoType="swt.widget.navigation.NavigationMenuItem" label="My View" href="http://www.google.com"></li>
	<li dojoType="swt.widget.navigation.NavigationMenuItem" label="My Library" href="http://www.google.com" target="target1"></li>
	<li dojoType="swt.widget.navigation.NavigationMenuItem" label="People" iconClass="someClass" handler=myHandler></li>
	<li dojoType="swt.widget.navigation.NavigationMenuItem" label="Communities">
		<ul dojoType="swt.widget.navigation.NavigationMenu" id="m2">
			<li dojoType="swt.widget.navigation.NavigationMenuItem" label="Inner Item One" iconClass="someClass" href="http://www.google.com"></li>
			<li dojoType="swt.widget.navigation.NavigationMenuItem" label="Inner Item Two" iconClass="someClass" href="http://www.google.com" target="target1"></li>
			<li dojoType="swt.widget.navigation.NavigationMenuItem" label="Inner Item Three" iconClass="someClass" handler="myHandler"></li>
		</ul>
	</li>
	<li dojoType="swt.widget.navigation.NavigationMenuItem" label="Right ALigned" iconClass="someClass" hasDropDown="true" handler=myHandler dropDownAlign="R">
		<div style="width:300px;height:200px;" class='dropDown'>Praesent rhoncus fermentum adipiscing. Aliquam erat volutpat. Praesent id lacus elit, vel cursus velit. Vivamus sed malesuada urna. Aenean elit nisi, pellentesque vel gravida non, blandit at quam. Ut quis magna et lacus molestie mollis. Donec sit amet dui ut sem placerat eleifend a id nibh.</div>
	</li>
	<li dojoType="swt.widget.navigation.NavigationMenuItem" label="" iconClass="someClass" handler=myHandler></li>
</ul>
</div>

<div class="header">
<ul dojoType="swt.widget.navigation.NavigationMenu"  alignment="horizontal">
	<li dojoType="swt.widget.navigation.NavigationMenuItem" label="My View" href="http://www.google.com"></li>
	<li dojoType="swt.widget.navigation.NavigationMenuItem" label="My Library" href="http://www.google.com" target="target1"></li>
	<li dojoType="swt.widget.navigation.NavigationMenuItem" label="People" iconClass="someClass" handler=myHandler></li>
	<li dojoType="swt.widget.navigation.NavigationMenuItem" label="Communities">
		<ul dojoType="swt.widget.navigation.NavigationMenu">
			<li dojoType="swt.widget.navigation.NavigationMenuItem" label="Inner Item One" iconClass="someClass" href="http://www.google.com"></li>
			<li dojoType="swt.widget.navigation.NavigationMenuItem" label="Inner Item Two" iconClass="someClass" href="http://www.google.com" target="target1"></li>
			<li dojoType="swt.widget.navigation.NavigationMenuItem" label="Inner Item Three" iconClass="someClass" handler="myHandler"></li>
		</ul>
	</li>
	<li dojoType="swt.widget.navigation.NavigationMenuItem" label="Right ALigned" iconClass="someClass" hasDropDown="true" handler=myHandler dropDownAlign="R">
		<div style="width:300px;height:200px;" class='dropDown'>Praesent rhoncus fermentum adipiscing. Aliquam erat volutpat. Praesent id lacus elit, vel cursus velit. Vivamus sed malesuada urna. Aenean elit nisi, pellentesque vel gravida non, blandit at quam. Ut quis magna et lacus molestie mollis. Donec sit amet dui ut sem placerat eleifend a id nibh.</div>
	</li>
	<li dojoType="swt.widget.navigation.NavigationMenuItem" label="" iconClass="someClass" handler=myHandler></li>
</ul>
</div>

</div>

</body>
</html>